{% extends "base.html" %} {% load static %}
{% block title %} 个人信息 {% endblock title %}
{% block content %}
<div class="container">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card shadow-sm mt-4">
                <div class="card-body">
                    <h3 class="card-title text-center mb-4">个人信息设置</h3>
                    
                    <!-- 用户信息头部 -->
                    <div class="text-center mb-4">
                        {% if profile.avatar %}
                            <img src="{{ profile.avatar.url }}" class="rounded-circle avatar-img mb-3" alt="用户头像">
                        {% else %}
                            <img src="{% static 'images/default_avatar.png' %}" class="rounded-circle avatar-img mb-3" alt="默认头像">
                        {% endif %}
                        <h5 class="mb-0">{{ user.username }}</h5>
                    </div>

                    <!-- 表单 -->
                    <form method="post" action="." enctype="multipart/form-data">
                        {% csrf_token %}
                        
                        <!-- 头像上传 -->
                        <div class="form-group mb-4">
                            <label for="avatar" class="form-label">
                                <i class="fas fa-camera"></i> 更换头像
                            </label>
                            <input type="file" class="form-control" name="avatar" id="avatar">
                        </div>

                        <!-- 电话 -->
                        <div class="form-group mb-4">
                            <label for="phone" class="form-label">
                                <i class="fas fa-phone"></i> 联系电话
                            </label>
                            <input type="text" class="form-control" id="phone" name="phone" 
                                   value="{{ profile.phone }}" placeholder="请输入您的联系电话">
                        </div>

                        <!-- 个人简介 -->
                        <div class="form-group mb-4">
                            <label for="bio" class="form-label">
                                <i class="fas fa-user-edit"></i> 个人简介
                            </label>
                            <textarea class="form-control" id="bio" name="bio" rows="4" 
                                      placeholder="介绍一下自己吧...">{{ profile.bio }}</textarea>
                        </div>

                        <!-- 按钮组 -->
                        <div class="d-flex justify-content-between">
                            <button type="button" class="btn btn-danger" onclick="confirmDelete()">
                                <i class="fas fa-user-times"></i> 注销账号
                            </button>
                            <button type="submit" class="btn btn-primary">
                                <i class="fas fa-save"></i> 保存修改
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 确认注销的表单 -->
<form id="user_delete" action="{% url 'userprofile:delete' user.id %}" method="POST" style="display:none;">
    {% csrf_token %}
</form>

<style>
/* 头像样式 */
.avatar-img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border: 3px solid #fff;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* 表单样式 */
.form-control {
    border-radius: 8px;
    padding: 10px 15px;
}

.form-control:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,.25);
}

/* 按钮样式 */
.btn {
    padding: 8px 20px;
    border-radius: 6px;
}

.btn-danger {
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover {
    background-color: #c82333;
    border-color: #bd2130;
}

/* 卡片样式 */
.card {
    border-radius: 15px;
    border: none;
}

.card-body {
    padding: 2rem;
}

/* 标签样式 */
.form-label {
    font-weight: 500;
    color: #495057;
}

/* 图标样式 */
.fas {
    margin-right: 8px;
}
</style>

<script>
function confirmDelete() {
    layer.confirm('确定要注销账号吗？此操作不可恢复！', {
        btn: ['确定注销','取消'],
        title: '警告',
        icon: 2,
        skin: 'layui-layer-red'
    }, function(){
        document.getElementById('user_delete').submit();
    });
}
</script>
{% endblock content %}